Skip to content

Fix long param names overflowing Trigger DAG modal Body:#67859

Merged
pierrejeambrun merged 2 commits into
apache:mainfrom
shashbha14:fix/trigger-dag-long-param-name-overflow-67851
Jun 3, 2026
Merged

Fix long param names overflowing Trigger DAG modal Body:#67859
pierrejeambrun merged 2 commits into
apache:mainfrom
shashbha14:fix/trigger-dag-long-param-name-overflow-67851

Conversation

@shashbha14
Copy link
Copy Markdown
Contributor

Closes #67851
When a DAG param has a very long key name, the label was overflowing the Trigger DAG modal and breaking the layout.
The 'flexBasis: "30%"' was being set on the 'Field.Label' element instead of its 'Stack' parent, so it had no effect on the flex layout — the label column just grew to fit whatever content was inside it. Added 'minWidth: 0' to the 'Stack' so it can shrink properly, moved 'flexBasis' there, and added 'wordBreak="break-word"' on the label so long names wrap within the column instead of overflowing.

I used Claude (claude.ai) as an AI assistant for parts of this implementation.

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Jun 1, 2026
@pedro-cf
Copy link
Copy Markdown

pedro-cf commented Jun 2, 2026

Hi @shashbha14 , thank you for your work, might be worth taking a look at this related issue: #67852

Copy link
Copy Markdown
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, add screenshots of before / after when opening UI contributions (as per our contribution guide)

Copy link
Copy Markdown
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, code looks good, and tested locally working as expected.

Before

Screenshot 2026-06-03 at 14 40 28

After

Screenshot 2026-06-03 at 14 40 19

@pierrejeambrun pierrejeambrun added this to the Airflow 3.2.3 milestone Jun 3, 2026
@pierrejeambrun pierrejeambrun added the backport-to-v3-2-test Mark PR with this label to backport to v3-2-test branch label Jun 3, 2026
@pierrejeambrun pierrejeambrun marked this pull request as ready for review June 3, 2026 12:41
@pierrejeambrun pierrejeambrun merged commit ce78c78 into apache:main Jun 3, 2026
161 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 3, 2026

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
v3-2-test PR Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-2-test Mark PR with this label to backport to v3-2-test branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Trigger DAG modal: long param names overflow modal width

3 participants